<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.path"/>
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive"/>
    </router-view>
    <main-tab-bar/>
  </div>
</template>

<style>
@import "assets/css/base.css";
</style>
<script>
import { computed } from 'vue'
import MainTabBar from '@/components/content/mainTabbar/MainTabBar'

export default {
  components: { MainTabBar },
  data() {
    return {
      books: ['黑猫警长', '家有儿女', '武林外传']
    }
  },
  provide() {
    return {
      bookLen: computed(() => this.books.length)
    }
  }
}
</script>
